import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import videoFile from '../../../static/videos/demo.mp4';
import vttFile from '../../../static/videos/demo.vtt';

<Meta
  title="Components/Video/Captions"
/>

# Video captions

If you host the video yourself and you have a `.vtt` file to describe the video captions, use the `track` element to add them. More informations about the [Video Text Track format](https://www.w3.org/TR/webvtt1/) and [customisation examples](https://css-tricks.com/improving-video-accessibility-with-webvtt/)

```html
<video
  controls
  src="path/to/your/video.mp4"
>
  <track
    default
    kind="captions"
    srclang="en"
    src="path/to/your/file.vtt"
  />
</video>
```
## Example

Play the video above to see the video captions and the improved styles for accessibility. You can also play the video in fullscreen to see the adapted styles.
<Canvas >
  <video
    controls
    src={videoFile}
  >
    <track
      default
      kind="captions"
      srclang="en"
      src={vttFile}
    />
</video>
</Canvas>
